<template>
  <div>
    <el-tabs type="card">
      <el-tab-pane>
        <span slot="label"> 课程列表</span>
        <nav-btn :sheet-header="xlsxHeader"
                 :sheet-list="_list"
                 xlsx-name="课程列表"
                 @search-method="handleGetSearchActivity"
        />
        <el-table
            ref="singleTable"
            :border="true"
            :data="xlsxSheet"
            highlight-current-row
            max-height="680"
            style="width: 100%"
            stripe
            :cell-style="{
            maxHeight:'2em',
            overflow:'hidden',
            textOverflow:'clip'
            }"
        >
          <el-table-column label="序号" sortable type="index" width="50"/>


          <el-table-column
              sortable
              v-for="(item,index) in settings"
              :prop="index"
              :label="item"
              :key="item"
              v-if="index!=='courseId'"
          />

          <el-table-column
              filter-placement="bottom-end"
              label="操作"
              prop="activityStatus"
              width="200"
          >
            <template slot-scope="scope">
              <el-button
                  plain
                  size="mini"
                  type="success"
                  @click="handleGetTeacher(scope.row.courseId)"
              >
                查看课程安排
              </el-button>
              <el-button
                  plain
                  size="mini"
                  type="success"
                  style="background-color: gray;color: #eeeeee"
                  @click="handleGetActivityInfo(scope.row.courseId)"
              >
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            :current-page="currentPage"
            :page-size="currentPageSize"
            :page-sizes="[10, 50, 100, 500, 1000, 99999]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleGetBySizeActivity"
            @current-change="handleGetByNumActivity"
        />
      </el-tab-pane>
      <el-tab-pane :lazy="true">
        <span slot="label">已完成 </span>
        <course-finish :status="3" @handleGetActivityInfo="handleGetActivityInfo"/>
      </el-tab-pane>
      <el-tab-pane :lazy="true">
        <span slot="label"> 进行中</span>
        <course-finish :status="2" @handleGetActivityInfo="handleGetActivityInfo"/>
      </el-tab-pane>
      <el-tab-pane :lazy="true">
        <span slot="label">报名中 </span>
        <course-finish :status="1" @handleGetActivityInfo="handleGetActivityInfo"/>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
        :visible.sync="infoDialog.isShow"
        title="课程详情"
    >
      <div v-if="infoDialog.content">
        <h3> 课程名称：{{ infoDialog.content.courseName }}</h3>

        <p> 总共学时：{{ infoDialog.content.courseArrangeHours }}</p>
        <p>课程价格{{ infoDialog.content.courseArrangePrice }}</p>
        <p>开课日期{{ infoDialog.content.courseDatetime }}</p>
        <p>课程描述{{ infoDialog.content.courseDisc }}</p>

        <p>开课人数：{{ infoDialog.content.coursePeople }}</p>

        <p>是否开课：{{ infoDialog.content.isopen|isOpen }}</p>
        <el-table
            :data="[infoDialog.content.teacherEntity]"
            style="width: 100%">
          <el-table-column
              label="教师名"
              prop="teacherName"
              width="180">
          </el-table-column>
          <el-table-column
              label="教师性别"
              prop="teacherSex"
              width="180">
          </el-table-column>
          <el-table-column
              label="教师职称"
              prop="teacherTitle">
          </el-table-column>
        </el-table>
      </div>
      <div v-else><span>暂无信息</span></div>
      <span slot="footer" align="center" class="dialog-footer">
        <el-button type="primary" @click="infoDialog.isShow = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
        :center="true"
        :title="'当前排课信息'"
        :visible.sync="dialog.isShow"
        fullscreen

    >


      <form-for-arrange is-ready-only
                        :arrange-time-array="dialog.list"
                        :course-arrange-hours="dialog.CourseArrangeHours"
      />

      <span slot="footer">
        <el-button type="primary" @click="dialog.isShow = false" style="width: 100%">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { SHEET_NAME } from "@/utils/publicinfo";

export default {
  components: {
    activityFinish: () => import( "@/views/activityManage/activityFinish"),
    activityIng: () => import( "@/views/activityManage/activityIng"),
    activityMid: () => import( "@/views/activityManage/activityMid"),
    navBtn: () => import( "@/components/navBtn"),
    CourseFinish: () => import( "@/views/courseManage/courseFinish"),
    FormForArrange: () => import( "@/views/courseManage/components/formForArrange"),
  },
  data () {
    return {
      list: [],
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      keyword: "",
      dataRange: null,
      articleContentshow: false,
      content: null,
      sheet_list: [],
      signShow: false,
      signImg: "",
      searchTime: null,
      auditShow: false,
      auditRes: null,
      auditReason: null,
      refuseReason: false,
      articleShow: false,
      tmpActivityId: "",
      options: {
        xlsxSheet: [],
        xlsxHeader: SHEET_NAME.ACTIVITY,
        activityInfo: null,
      },
      dialog: {
        isShow: false,
        status: null,
        signImg: "",
        id: null,
        signTime: null,
        isAble: true,
        list: [],
        orCodeShow: false,
      },
      infoDialog: {
        isShow: false,
        content: null,
      },
      settings: {
        "courseId": "课程ID",
        "courseName": "课程名称",
        "courseDisc": "课程简介",
        "coursePeople": "开课人数",
        "courseDatetime": "开课时间",
      },
    };
  },
  mounted () {
    this.handleGetByNumActivity(1);
  },
  computed: {

    xlsxSheet () {
      const list = this.list;
      let _list = [];
      _list = list.map(value => {
        console.log(`value-->`, value);
        return {
          "courseId": value?.courseId,
          "courseName": value?.courseName,
          "courseDisc": value?.courseDisc,
          "coursePeople": value?.coursePeople,
          "courseDatetime": value?.courseDatetime,
        };
      });

      return _list;
    },
    xlsxHeader () {
      const { settings } = this;
      return Object.values(settings);
    },
    _list () {
      const { xlsxSheet } = this;
      let _list = xlsxSheet.map(value => {
        return [Object.values(value)];
      });
      return _list.flat(1);
    },
  },

  methods: {
    async handleGetBySizeActivity (size) {
      this.currentPageSize = size;
      await this.handleGetActivity();
    },

    // 分页查询全部活动
    async handleGetByNumActivity (num) {
      this.currentPage = num;
      await this.handleGetActivity();
    },
    // 获取单个活动信息
    async handleGetActivityInfo (id) {
      this.infoDialog.isShow = true;
      const res = await this.$http.courseInfo(id);
      // console.log(res)
      if (res.code !== 0) return null;
      this.infoDialog.content = res.data;
    },
    // 分页查询全部活动
    async handleGetActivity () {
      const res = await this.$http.courseAll({
        pageNum: this.currentPage,
        pageSize: this.currentPageSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;

      this.total = res.data.totalCount;
      await this.formatDate({ data: res.data.list });
    },
    formatDate (params) {
      let { data } = params;
      for (let d of data) {
        this.options.xlsxSheet.push([]);
      }
    },

    async handleGetTeacher (courseId) {
      let params = {
        courseId,
        pageNum: 1,
        pageSize: 10,
        status: 0,
      };
      this.dialog.isShow = true;
      await this.$http.getSchedulesByIdAndStatus(params)
          .then(res => {
            this.dialog.list = res.data.list;
          }).catch(e => {
            console.log(e);
          });
    },

    handleGetSearchActivity (info) {
      let {
        content,
        dataRange,
      } = info;

      return this.searchByBoth(content, dataRange);

    },
    async searchByBoth (content, dataRange) {
      //  后端接口

      const res = await this.$http.courseAllBySearch(
          {
            from: dataRange ? dataRange[0] ?? "" : "",
            keywords: content ?? "",
            pageNum: this.currentPage ?? "",
            pageSize: this.currentPageSize ?? "",
            to: dataRange ? dataRange[1] ?? "" : "",
          },
      );
      if (res.code !== 0) return null;
      this.total = res.data.total;
      this.list = res.data.list;

    },

  },

  filters: {
    isOpen (val) {
      if (val) return "已开课";
      return "未开课";
    },
  },
};
</script>
